<template>
  <view class="activity-detail-page">
    <view class="activity-title u-line-1">
      {{ info.ticketName || "" }}
    </view>
    <view class="appointment-date-box" v-if="appointmentDate.length > 0">
      <view class="appointment-title">预约日期</view>
      <view class="appointment-day-box">
        <view class="item-box">
          <view
            class="item"
            :class="{
              active: item.isActive,
              disable: item.stockResidue == '0',
            }"
            v-for="item in appointmentDate"
            :key="item.day"
            @click="changeDay(item)"
          >
            <view class="day">{{ item.day }}</view>
            <view class="zhou-box">
              <view class="zhou">{{ item.week }}</view>
              <view class="man" v-if="item.stockResidue == '0'">已预满</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="select-ticket-box" v-if="ticketList.length > 0">
      <view class="select-ticket-title"> 选择门票</view>
      <view class="ticket-list">
        <view
          class="list"
          :class="{ active: ticket.isActive }"
          v-for="(ticket, index) in ticketList"
          :key="index"
          @click="selectTicket(ticket)"
        >
          <view class="top">
            <view class="ticket-name">{{ ticket.typeName }}</view>
            <view class="ticket-price">￥{{ ticket.showTypePrice }}</view>
          </view>
          <view class="content" v-if="false">
            {{ ticket.tickeDesc }}
          </view>
          <view class="bottom" v-if="false">
            <view class="xuzhi" @click="showXuzhiProp(ticket)">购买须知</view>
            <image
              @click="showXuzhiProp(ticket)"
              class="icon-xuzhi"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-xuzhi.png"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="u-content">
      <u-parse
        :content="info.introduceDetails"
        :tagStyle="parseStyle"
      ></u-parse>
    </view>

    <view class="btn-box">
      <view class="appointment-btn" @click="save">立即预订</view>
    </view>
    <u-popup :show="showProp" @close="closeProp">
      <view class="xuzhi-title"> 购买须知</view>
      <view class="xuzhi-desc">
        {{ xuzhiDesc }}
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getActiveDetail } from "@/config/api.js";
import dayjs from "dayjs";

export default {
  props: ["id"],
  data() {
    return {
      showProp: false,
      xuzhiDesc: "",
      appointmentDate: [],
      ticketList: [],
      info: {},
      ticketPics: [],
    };
  },
  onLoad() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      getActiveDetail({
        ticketId: this.id,
        ticketType: "2",
      }).then(({ code, data }) => {
        if (code == 200) {
          this.info = data.ticketDetailVo;
          this.ticketPics = data.ticketPics;
          data.tourTime.forEach((item, index) => {
            item.isActive = index === 0;

            item.day = dayjs(item.stockDate).format("M月D日");
            item.voList.forEach((vo, ind) => {
              vo.isActive = ind === 0;
              vo.showTypePrice = vo.typePrice; // Number(`${vo.typePrice}e-2`).toFixed(2);
            });
          });
          this.appointmentDate = data.tourTime;
          this.ticketList = data.tourTime[0].voList;
        }
      });
    },
    showXuzhiProp(item) {
      this.xuzhiDesc = item.xuzhi;
      this.showProp = true;
    },
    closeProp() {
      this.showProp = false;
    },
    changeDay(item) {
      if (item.stockResidue == 0) {
        return;
      }
      this.appointmentDate.forEach((list) => {
        list.isActive = false;
      });
      item.voList.forEach((item, index) => {
        item.isActive = index === 0;
      });
      this.ticketList = item.voList;
      item.isActive = true;
    },
    selectTicket(item) {
      this.ticketList.forEach((list) => {
        list.isActive = false;
      });
      item.isActive = true;
    },
    save() {
      this.$store.commit("ACTIVE_RESERVE_INFO", {
        ticketPics: this.ticketPics.length > 0 ? this.ticketPics[0] : "",
        ticketList: this.ticketList.filter((item) => item.isActive),
        appointmentDate: this.appointmentDate.filter((item) => item.isActive),
        detail: this.info,
      });
      this.toURL("/page_index/appointment/confirm", {}, { isAuth: true });
    },
  },
};
</script>

<style lang="scss">
.activity-detail-page {
  padding: 24rpx 0 calc(env(safe-area-inset-bottom) + 120rpx);

  .activity-title {
    padding: 0 32rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 50rpx;
  }

  .appointment-date-box {
    padding: 48rpx 32rpx 0;

    .appointment-title {
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40rpx;
    }

    .appointment-day-box {
      width: 100%;
      overflow-x: scroll;
      margin: 24rpx 0 64rpx;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .item-box {
      display: flex;
      align-items: center;

      .item {
        padding: 16rpx 24rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 24rpx;

        &.active {
          background: #ff5000;
          box-shadow: 0rpx 10rpx 24rpx -10rpx rgba(255, 113, 58, 0.25);

          .day {
            color: #fff201;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          }

          .zhou {
            color: #ffffff;
          }
        }

        &.disable {
          background: #faf9f8;

          .day {
            color: rgba(0, 0, 0, 0.3);
          }

          .zhou {
            color: rgba(0, 0, 0, 0.3);
          }
        }

        .day {
          font-size: 40rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 56rpx;
          padding-bottom: 8rpx;
          white-space: nowrap;
        }

        .zhou {
          font-size: 24rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.5);
          line-height: 32rpx;
        }

        .zhou-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 7rpx;
        }

        .man {
          font-size: 24rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 32rpx;
        }
      }
    }
  }

  .select-ticket-box {
    .select-ticket-title {
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40rpx;
      padding: 0 32rpx 24rpx;
    }

    .ticket-list {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 32rpx 32rpx;

      .list {
        padding: 24rpx;
        background: #faf9f8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-bottom: 24rpx;
        border: 2rpx solid #faf9f8;

        &.active {
          background: rgba(255, 80, 0, 0.102);
          border: 2rpx solid #ff5000;
        }
      }

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8rpx;
      }

      .ticket-name {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 44rpx;
      }

      .ticket-price {
        font-size: 40rpx;
        font-weight: 700;
        color: #ff5000;
        line-height: 44rpx;
      }

      .content {
        padding-bottom: 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 40rpx;
      }

      .bottom {
        display: flex;
        align-items: center;

        .xuzhi {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 40rpx;
        }

        .icon-xuzhi {
          display: block;
          width: 32rpx;
          height: 32rpx;
          margin-left: 4rpx;
        }
      }
    }
  }

  .u-content {
    padding: 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    text-align: justify;
    line-height: 1.5;
  }

  .btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    height: 120rpx;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;

    .appointment-btn {
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 80rpx;
    }
  }

  .xuzhi-title {
    padding-top: 24rpx;
    text-align: center;
  }

  .xuzhi-desc {
    padding: 24rpx;
  }
}
</style>
